@import '~styles/varibles.styl'

.el-form
  display flex
  flex-direction column
  align-items center
  justify-content center
  min-width 400px
  height 500px
  background-color #fff
  border-radius 1em
  box-shadow 0 0 8px 3px shadow-color
  .el-form-item
    width 65%
    height 40px
    margin-bottom 25px
    text-align center
    h1
      color #333
      font-size 36px
      font-weight 800
  .input-row
    &:focus-within
      width 75%
    &>>>.el-input__inner
      padding-left 24px
      border 2px solid #ccc
      // 渐变色边框
      background-image linear-gradient(180deg, #fff, #fff), linear-gradient(to right, #abecd6, #fbed96)
      // 将背景颜色定位到内边距和边框
      background-origin padding-box, border-box
      background-clip padding-box, border-box
      border-radius 0.8em
      transition border linear 0.2s
      &:focus
        border-color transparent
  .is-error>>>.el-input__inner
    border-color color-error
  .text-row, .btn-row, .check-row
    margin-bottom 0
    .btn
      width 100%
      color #fff
      background-color color-normal
      border none
      border-radius 0.8em
      transition 0.3s ease-in-out
      opacity 0.9
      &:hover
        opacity 1
    .code-btn
      background-color color-yellow
  .check-row
    margin-top -10px
    .el-checkbox
      float left
.link-btn
  color color-normal
  text-decoration underline
  cursor pointer